<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login AJAX 示例</title>
    <style>
        /*
         * 重置默认样式，确保在不同浏览器中表现一致
         */
        * {
            margin: 0;                    /* 清除默认外边距 */
            padding: 0;                   /* 清除默认内边距 */
            box-sizing: border-box;       /* 使用边框盒模型，使宽度包含padding和border */
        }

        /*
         * 页面整体背景设置
         */
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;  /* 设置字体 */
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* 渐变背景 */
            min-height: 100vh;            /* 最小高度为视窗高度 */
            padding: 20px;                /* 页面内边距 */
            line-height: 1.6;             /* 行高，提升可读性 */
        }

        /*
         * 页面主容器
         */
        .container {
            max-width: 500px;             /* 最大宽度 */
            margin: 0 auto;               /* 水平居中 */
            background: white;            /* 白色背景 */
            border-radius: 10px;          /* 圆角 */
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); /* 阴影 */
            overflow: hidden;             /* 隐藏溢出内容 */
        }

        /*
         * 页面标题
         */
        .page-header {
            text-align: center;           /* 文字居中 */
            padding: 20px;                /* 内边距 */
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* 渐变背景 */
            color: white;                 /* 文字颜色 */
        }

        /*
         * 切换按钮容器
         */
        .tab-buttons {
            display: flex;                /* 弹性布局 */
            border-bottom: 1px solid #ddd; /* 底部分隔线 */
        }

        /*
         * 切换按钮样式
         */
        .tab-button {
            flex: 1;                      /* 平均分配宽度 */
            padding: 15px;                /* 内边距 */
            background: #f8f9fa;          /* 背景色 */
            border: none;                 /* 无边框 */
            cursor: pointer;              /* 鼠标指针 */
            font-size: 16px;              /* 字体大小 */
            transition: background 0.3s;  /* 背景过渡效果 */
            text-align: center;           /* 文字居中 */
        }

        /*
         * 切换按钮悬停效果
         */
        .tab-button:hover {
            background: #e9ecef;          /* 悬停背景色 */
        }

        /*
         * 激活状态的按钮
         */
        .tab-button.active {
            background: white;            /* 白色背景 */
            font-weight: bold;            /* 粗体 */
        }

        /*
         * 功能面板样式
         */
        .tab-panel {
            display: none;                /* 默认隐藏 */
            padding: 30px;                /* 内边距 */
        }

        /*
         * 激活的面板
         */
        .tab-panel.active {
            display: block;               /* 显示 */
        }

        /*
         * 表单内每个输入项的容器
         */
        .form-group {
            margin-bottom: 20px;          /* 下方外边距 */
        }

        /*
         * 标签样式
         */
        label {
            display: block;               /* 块级元素显示 */
            margin-bottom: 8px;           /* 下方外边距 */
            font-weight: bold;            /* 粗体 */
            color: #555;                  /* 文字颜色 */
        }

        /*
         * 输入框样式
         */
        input[type="text"], input[type="password"] {
            width: 100%;                  /* 宽度100% */
            padding: 12px;                /* 内边距 */
            border: 2px solid #ddd;       /* 边框 */
            border-radius: 5px;           /* 圆角 */
            font-size: 16px;              /* 字体大小 */
            transition: border-color 0.3s; /* 边框颜色过渡动画 */
        }

        /*
         * 输入框获得焦点时的样式
         */
        input[type="text"]:focus, input[type="password"]:focus {
            border-color: #667eea;        /* 边框颜色变化 */
            outline: none;                /* 去除默认轮廓 */
            box-shadow: 0 0 5px rgba(102, 126, 234, 0.3); /* 阴影效果 */
        }

        /*
         * 按钮样式
         */
        input[type="button"] {
            width: 100%;                  /* 宽度100% */
            padding: 12px;                /* 内边距 */
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* 渐变背景 */
            color: white;                 /* 文字颜色 */
            border: none;                 /* 无边框 */
            border-radius: 5px;           /* 圆角 */
            font-size: 16px;              /* 字体大小 */
            cursor: pointer;              /* 鼠标指针样式 */
            transition: transform 0.2s, box-shadow 0.2s; /* 过渡动画 */
        }

        /*
         * 按钮悬停效果
         */
        input[type="button"]:hover {
            transform: translateY(-2px);  /* 向上移动2像素 */
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* 阴影增强 */
        }

        /*
         * 按钮按下效果
         */
        input[type="button"]:active {
            transform: translateY(0);     /* 恢复原位 */
        }

        /*
         * 结果显示区域样式
         */
        .result {
            margin-top: 15px;             /* 上方外边距 */
            padding: 15px;                /* 内边距 */
            border-radius: 5px;           /* 圆角 */
            text-align: center;           /* 文字居中 */
            font-weight: bold;            /* 粗体 */
        }

        /*
         * 成功结果区域
         */
        .result.success {
            background-color: #d4edda;    /* 背景色 */
            color: #155724;               /* 文字颜色 */
        }

        /*
         * 失败结果区域
         */
        .result.error {
            background-color: #f8d7da;    /* 背景色 */
            color: #721c24;               /* 文字颜色 */
        }

        /*
         * 信息结果区域
         */
        .result.info {
            background-color: #e8f4fd;    /* 背景色 */
            color: #31708f;               /* 文字颜色 */
        }

        /*
         * 响应式设计 - 适配小屏幕设备
         */
        @media (max-width: 600px) {
            body {
                padding: 10px;            /* 减小页面内边距 */
            }

            .container {
                border-radius: 5px;       /* 减小圆角 */
            }

            .tab-panel {
                padding: 20px;            /* 减小内边距 */
            }

            .page-header {
                padding: 15px;            /* 减小内边距 */
                font-size: 1.2em;         /* 调整字体大小 */
            }

            .tab-button {
                padding: 12px;            /* 减小内边距 */
                font-size: 14px;          /* 调整字体大小 */
            }
        }

        /* 记住密码样式 */
        .remember-group {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }

        .remember-group label {
            margin-bottom: 0;
            margin-left: 8px;
            font-weight: normal;
        }

        .default-btn {
            margin-left: 20px;
            background: #f0f0f0;
            border: 1px solid #ccc;
            border-radius: 3px;
            padding: 5px 10px;
            cursor: pointer;
            font-size: 14px;
        }
    </style>
</head>


<body>
<!-- 页面主容器 -->
<div class="container">
    <!-- 页面标题 -->
    <div class="page-header">
        <h1>AJAX 用户管理系统</h1>
    </div>

    <!-- 切换按钮区域 -->
    <div class="tab-buttons">
        <button class="tab-button active" onclick="switchTab('login')">登录</button>
        <button class="tab-button" onclick="switchTab('register')">注册</button>
        <button class="tab-button" onclick="switchTab('query')">查询</button>
        <button class="tab-button" onclick="switchTab('all')">所有用户</button>
    </div>

    <!-- 登录面板 -->
    <div id="login" class="tab-panel active">
        <h2>用户登录</h2>
        <form id="loginForm">
            <!-- 账号输入框 -->
            <div class="form-group">
                <label for="account">账号:</label>
                <input type="text" id="account" name="account" placeholder="请输入账号">
            </div>
            <!-- 密码输入框 -->
            <div class="form-group">
                <label for="password">密码:</label>
                <input type="password" id="password" name="password" placeholder="请输入密码">
            </div>
            <!-- 记住密码选项 -->
            <div class="form-group remember-group">
                <input type="checkbox" id="rememberMe" name="rememberMe">
                <label for="rememberMe">记住密码</label>
                <button type="button" class="default-btn" onclick="fillDefaultCredentials()">
                    填充默认账号密码
                </button>
            </div>
            <!-- 登录按钮 -->
            <div class="form-group">
                <input type="button" value="登录" onclick="loginAjax()">
            </div>
            <!-- 登录结果显示区域 -->
            <div id="loginResult" class="result"></div>
        </form>
    </div>

    <!-- 注册面板 -->
    <div id="register" class="tab-panel">
        <h2>用户注册</h2>
        <form id="registerForm">
            <!-- 注册账号输入框 -->
            <div class="form-group">
                <label for="regAccount">账号:</label>
                <input type="text" id="regAccount" name="account" placeholder="请输入账号">
            </div>
            <!-- 注册密码输入框 -->
            <div class="form-group">
                <label for="regPassword">密码:</label>
                <input type="password" id="regPassword" name="password" placeholder="请输入密码">
            </div>
            <!-- 确认密码输入框 -->
            <div class="form-group">
                <label for="secondPassword">确认密码:</label>
                <input type="password" id="secondPassword" name="secondPassword" placeholder="请再次输入密码">
            </div>
            <!-- 注册按钮 -->
            <div class="form-group">
                <input type="button" value="注册" onclick="registerAjax()">
            </div>
            <!-- 注册结果显示区域 -->
            <div id="registerResult" class="result"></div>
        </form>
    </div>

    <!-- 查询面板 -->
    <div id="query" class="tab-panel">
        <h2>查询用户</h2>
        <div class="form-group">
            <label for="userId">用户ID:</label>
            <input type="text" id="userId" name="id" placeholder="请输入用户ID">
        </div>
        <div class="form-group">
            <input type="button" value="查询" onclick="selectLoginAjax()">
        </div>
        <!-- 用户信息显示区域 -->
        <div id="userInfo" class="result info"></div>
    </div>

    <!-- 所有用户面板 -->
    <div id="all" class="tab-panel">
        <h2>所有用户</h2>
        <div class="form-group">
            <input type="button" value="查询所有用户" onclick="selectAllLoginsAjax()">
        </div>
        <!-- 所有用户信息显示区域 -->
        <div id="allUsers" class="result info"></div>
    </div>
</div>

<script type="text/javascript">
    // 页面加载完成后自动填充记住的账号密码
    window.onload = function() {
        // 检查是否有记住的账号信息
        var rememberedAccount = localStorage.getItem("rememberedAccount");
        var rememberedPassword = localStorage.getItem("rememberedPassword");

        if (rememberedAccount && rememberedPassword) {
            document.getElementById("account").value = rememberedAccount;
            document.getElementById("password").value = rememberedPassword;
            document.getElementById("rememberMe").checked = true;
        }
    };

    /**
     * 切换功能面板
     * @param {string} tabId - 要显示的面板ID
     */
    function switchTab(tabId) {
        // 隐藏所有面板
        var panels = document.querySelectorAll('.tab-panel');
        panels.forEach(function(panel) {
            panel.classList.remove('active');
        });

        // 取消所有按钮的激活状态
        var buttons = document.querySelectorAll('.tab-button');
        buttons.forEach(function(button) {
            button.classList.remove('active');
        });

        // 显示指定面板
        document.getElementById(tabId).classList.add('active');

        // 激活对应按钮
        event.target.classList.add('active');
    }

    /**
     * 兼容性创建 AJAX 对象
     * 解决不同浏览器创建XMLHttpRequest对象的兼容性问题
     * @returns {Object} XMLHttpRequest对象
     */
    function getAjax() {
        var ajax = null;
        try {
            // 针对IE浏览器（较老版本）
            ajax = new ActiveXObject("microsoft.xmlhttp");
        } catch(e) {
            // 针对非IE浏览器（现代浏览器）
            ajax = new XMLHttpRequest();
        }
        return ajax;
    }

    // 填充默认账号密码的函数
    function fillDefaultCredentials() {
        document.getElementById("account").value = "admin";
        document.getElementById("password").value = "123456";
    }

    /**
     * 登录 AJAX 请求
     * 处理用户登录请求，发送账号和密码到服务器进行验证
     */
    function loginAjax() {
        // 1. 获取ajax对象
        var ajax = getAjax();

        // 2. 发送前的准备工作
        var method = "get";   // GET请求方法
        // 获取用户输入的账号和密码
        var account = document.getElementById("account").value;
        var password = document.getElementById("password").value;
        // 检查是否需要记住密码
        var rememberMe = document.getElementById("rememberMe").checked;

        // 将参数拼接到URL中
        var url = "http://localhost:8080/login/login?account=" + encodeURIComponent(account) + "&password=" + encodeURIComponent(password);

        // 初始化请求
        ajax.open(method, url);

        // 注意：GET请求不需要设置Content-Type请求头，也不需要发送请求体
        // 3. 发送请求（GET请求不发送数据体）
        ajax.send();

        // 4. 监控状态变化
        ajax.onreadystatechange = function() {
            if(ajax.readyState == 4) {
                // 添加调试信息
                console.log("Status:", ajax.status);
                console.log("Response:", ajax.responseText);

                if(ajax.status == 200) {
                    var responseText = ajax.responseText;
                    // 使用弹窗显示返回的提示信息
                    alert(responseText || "登录成功但无返回信息");

                    // 如果用户选择了记住密码，则保存到localStorage
                    if (rememberMe) {
                        localStorage.setItem("rememberedAccount", account);
                        localStorage.setItem("rememberedPassword", password);
                    } else {
                        // 如果未选择记住密码，则清除之前保存的信息
                        localStorage.removeItem("rememberedAccount");
                        localStorage.removeItem("rememberedPassword");
                    }

                    // 登录成功后清空结果区域，不显示任何内容
                    var resultDiv = document.getElementById("loginResult");
                    resultDiv.innerHTML = "";
                    resultDiv.className = "result";
                } else {
                    var errorMessage = "请求失败，状态码：" + ajax.status;
                    // 使用弹窗显示错误信息
                    alert(errorMessage);

                    // 显示错误信息在页面上
                    var resultDiv = document.getElementById("loginResult");
                    resultDiv.innerHTML = errorMessage;
                    resultDiv.className = "result error";
                }
            }
        };

        // 添加错误处理
        ajax.onerror = function() {
            var errorMessage = "网络错误，请检查网络连接和服务器状态";
            alert(errorMessage);

            var resultDiv = document.getElementById("loginResult");
            resultDiv.innerHTML = errorMessage;
            resultDiv.className = "result error";
        };

        // 添加超时处理
        ajax.ontimeout = function() {
            var errorMessage = "请求超时，请检查服务器是否正常运行";
            alert(errorMessage);

            var resultDiv = document.getElementById("loginResult");
            resultDiv.innerHTML = errorMessage;
            resultDiv.className = "result error";
        };
    }

    /**
     * 注册 AJAX 请求
     * 处理用户注册请求，发送账号和密码到服务器进行注册
     */
    function registerAjax() {
        // 1. 获取ajax对象
        var ajax = getAjax();

        // 2. 发送前的准备工作
        var method = "post";                          // 请求方法
        var url = "/register";                        // 请求地址

        // 获取用户输入的注册信息
        var account = document.getElementById("regAccount").value;
        var password = document.getElementById("regPassword").value;
        var secondPassword = document.getElementById("secondPassword").value;

        // 初始化请求
        ajax.open(method, url);

        // 如果是post方式，需要设置该请求头（指定数据格式）
        ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

        // 3. 发送请求（将注册信息作为参数发送）
        ajax.send('account=' + encodeURIComponent(account) +
            '&password=' + encodeURIComponent(password) +
            '&secondPassword=' + encodeURIComponent(secondPassword));

        // 4. 监控状态变化
        ajax.onreadystatechange = function() {
            // 当ajax请求完成时
            if(ajax.readyState == 4) {
                // 获取结果显示区域
                var resultDiv = document.getElementById("registerResult");

                // 正常响应状态（HTTP状态码200表示成功）
                if(ajax.status == 200) {
                    // 获取响应的数据并显示在页面上
                    resultDiv.innerHTML = ajax.responseText;
                    resultDiv.className = "result success"; // 成功样式
                } else {
                    // 请求失败，显示错误信息
                    resultDiv.innerHTML = "请求失败，状态码：" + ajax.status;
                    resultDiv.className = "result error"; // 错误样式
                }
            }
        }
    }

    /**
     * 查询单个用户 AJAX 请求
     * 根据用户ID查询用户信息
     */
    function selectLoginAjax() {
        // 1. 获取ajax对象
        var ajax = getAjax();

        // 2. 发送前的准备工作
        var method = "get";                           // 请求方法
        var userId = document.getElementById("userId").value;  // 获取用户输入的ID
        var url = "/selectLogin?id=" + encodeURIComponent(userId); // 构造请求URL

        // 初始化请求
        ajax.open(method, url);

        // 3. 发送请求（GET请求不需要发送数据体）
        ajax.send();

        // 4. 监控状态变化
        ajax.onreadystatechange = function() {
            // 当ajax请求完成时
            if(ajax.readyState == 4) {
                // 获取结果显示区域
                var resultDiv = document.getElementById("userInfo");

                // 正常响应状态（HTTP状态码200表示成功）
                if(ajax.status == 200) {
                    // 获取响应的数据并显示在页面上
                    resultDiv.innerHTML = ajax.responseText;
                } else {
                    // 请求失败，显示错误信息
                    resultDiv.innerHTML = "请求失败，状态码：" + ajax.status;
                }
            }
        }
    }

    /**
     * 查询所有用户 AJAX 请求
     * 获取所有用户的列表信息
     */
    function selectAllLoginsAjax() {
        // 1. 获取ajax对象
        var ajax = getAjax();

        // 2. 发送前的准备工作
        var method = "get";                           // 请求方法
        var url = "/selectLoginAll";                  // 请求地址

        // 初始化请求
        ajax.open(method, url);

        // 3. 发送请求（GET请求不需要发送数据体）
        ajax.send();

        // 4. 监控状态变化
        ajax.onreadystatechange = function() {
            // 当ajax请求完成时
            if(ajax.readyState == 4) {
                // 获取结果显示区域
                var resultDiv = document.getElementById("allUsers");

                // 正常响应状态（HTTP状态码200表示成功）
                if(ajax.status == 200) {
                    // 获取响应的数据并显示在页面上
                    resultDiv.innerHTML = ajax.responseText;
                } else {
                    // 请求失败，显示错误信息
                    resultDiv.innerHTML = "请求失败，状态码：" + ajax.status;
                }
            }
        }
    }
</script>
</body>
</html>
